import React from 'react';
import {
    Text,
    View,
    ScrollView,
    StyleSheet,
    Image,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import Rest from './Rest';


export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeIndex: 0,
            show: true,
            carouselItems: [
                { image: require('../../Image/img1.png') },
                { image: require('../../Image/img2.png') },
                { image: require('../../Image/img3.png') },
                { image: require('../../Image/img4.png') },
                { image: require('../../Image/img5.png') },
                { image: require('../../Image/img6.png') },
                { image: require('../../Image/img7.png') },
            ]
        }

    }

    _renderItem({ item, index }) {
        return (
            <TouchableOpacity style={{
                backgroundColor: 'floralwhite',
                borderRadius: 25,
                overflow: 'hidden',
            }}
                onPress={() => console.log('click')}>
                <Image imageStyle={{ borderRadius: 25 }} source={item.image} style={styles.imgStyle} resizeMode='stretch'></Image>
            </TouchableOpacity>
        )
    }

    render() {
        return (
            <ScrollView style={styles.container} >
                {

                    <View style={{ marginBottom: ptd(30) }}>
                        <View style={styles.headerStyle}><Text style={{ fontSize: 30 }}>Release</Text></View>
                        <View style={styles.show}>
                            <Carousel
                                layout={'stack'}
                                ref={ref => this.carousel = ref}
                                data={this.state.carouselItems}
                                sliderWidth={w}
                                itemWidth={ptd(258)}
                                itemHeight={ptd(380)}
                                firstItem={0}
                                renderItem={this._renderItem}
                                onSnapToItem={index => this.setState({ activeIndex: index })}
                                enableMomentum={false}
                                lockScrollWhileSnapping={true}
                                autoplay={true}
                            />
                        </View>
                        <Rest navigation={this.props.navigation}></Rest>
                    </View>

                }
                <TouchableOpacity onPress={
                    () => {
                        this.props.navigation.navigate('list',{id:100})
                    }
                }>
                    <View style={styles.headerStyle2}>
                        <View style={styles.headerShow1}></View>
                    </View>
                </TouchableOpacity>


            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'rgb(230,232,255)'
    },
    headerStyle: {
        height: 70,
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 20,
    },
    show: {
        height: 450,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    imgStyle: {
        width: ptd(280),
        height: ptd(350),
        overlayColor: '#918BD3'
    },
    headerStyle2: {
        flex: 1,
        height: ptd(30),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        marginTop: ptd(20),
    },
    headerShow1: {
        width: '28%',
        height: '14%',
        backgroundColor: 'rgb(233,233,235)',
        borderRadius: 50
    }
})